<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../css/layui.css?t=1488795362026"  >
<link rel="stylesheet" href="../css/global.css?t=1488795362026" media="all">
</head>
<body>
<div class="mian">
		<div class="clearfix">
				<div class="col-2 bg">
						<div class="mp-account-header pad_20">
								<div class="clearfix">
										<div class="mp-avatar"> <img src="http://cdnlogo.xiguaji.com/BizLogo/MzA5MTg4NjI3MQ==.jpg-BizLogoCut">
												<div class="mp-info pull-left"><span>不凡见闻</span><br>
														<em>微信号:bufanjw</em></div>
										</div>
								</div>
								<div class="mp-account-intro">
										<div class="mp-account-time"> 数据最新更新时间: 2017/3/13 13:09:24 <a>关注该公众号后会得到更及时的数据</a> </div>
										<div class="mp-account-info">〖官方认证，所见不凡〗</div>
								</div>
								<ul class="mp-account-data clearfix">
										<li class="col-2"><span>119320</span><br>
												预计活跃粉丝数<i class="iconfont"></i></li>
										<li class="col-2"><span>51.0200</span><br>
												公众号传播指数<i class="iconfont"></i></li>
								</ul>
						</div>
				</div>
				<div class="col-2">
						<div class="Chart pad_20">图表图表图表图表图表图表</div>
				</div>
		</div>
		<div class="clear"></div>
		<div class="clearfix info">
				<ul class="sub-list-nav clearfix" id="myTab1">
					<li class="active"><a data-toggle="tab" href="#s1" aria-expanded="true">15天热门推文</a></li>
					<li class=""><a data-toggle="tab" href="#s2" aria-expanded="false">最新推文</a></li>
				</ul>
				<div class="data">推文时间：2016-10-10 13:21 更新时间：2016-10-10 13:21</div>
				<table class="layui-table" lay-skin="line">
						<colgroup>
						<col width="100">
						<col>
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="200">
						<col>
						</colgroup>
						<thead>
							<tr>
								<th class="txt_center">传播指数</th>
								<th>封面/文章标题</th>
								<th class="txt_center">类型</th>
								<th class="txt_center">阅读数</th>
								<th class="txt_center">赞数</th>
								<th class="txt_center">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
						</tbody>
				</table>
				<div class="data">推文时间：2016-10-10 13:21 更新时间：2016-10-10 13:21</div>
				<table class="layui-table" lay-skin="line">
						<colgroup>
						<col width="100">
						<col>
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="200">
						<col>
						</colgroup>
						<thead>
							<tr>
								<th class="txt_center">传播指数</th>
								<th>封面/文章标题</th>
								<th class="txt_center">类型</th>
								<th class="txt_center">阅读数</th>
								<th class="txt_center">赞数</th>
								<th class="txt_center">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
							<tr>
								<td class="txt_center">1000</td>
								<td> 刚出的，國人速看！</td>
								<td class="txt_center">视频</td>
								<td class="txt_center">1371</td>
								<td class="txt_center">36</td>
								<td class="txt_center">添加  数据分析</td>
							</tr>
						</tbody>
				</table>
				<div id="demo1"></div>
		</div>
</div>
<script src="../layui.js"></script> 
<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  laypage({
    cont: 'demo1'
    ,pages: 100 //总页数
    ,groups: 5 //连续显示分页数
  });
  
  laypage({
    cont: 'demo2'
    ,pages: 100
    ,skin: '#1E9FFF'
  });
  
  laypage({
    cont: 'demo3'
    ,pages: 100
    ,first: 1
    ,last: 100
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
  
  laypage({
    cont: 'demo4'
    ,pages: 100
    ,first: false
    ,last: false
  });
  
  laypage({
    cont: 'demo5'
    ,pages: 100
    ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
    ,hash: 'fenye' //自定义hash值
  });
  
  laypage({
    cont: 'demo6'
    ,pages: 5
    ,groups: 0
    ,first: false
    ,last: false
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
  
  laypage({
    cont: 'demo7'
    ,pages: 100
    ,skip: true
  });
  
  
  //将一段数组分页展示
  
  //测试数据
  var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
  ];
  
  var nums = 5; //每页出现的数据量
  
  //模拟渲染
  var render = function(curr){
    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
    var str = '', last = curr*nums - 1;
    last = last >= data.length ? (data.length-1) : last;
    for(var i = (curr*nums - nums); i <= last; i++){
      str += '<li>'+ data[i] +'</li>';
    }
    return str;
  };
  
  //调用分页
  laypage({
    cont: 'demo8'
    ,pages: Math.ceil(data.length/nums) //得到总页数
    ,jump: function(obj){
      document.getElementById('biuuu_city_list').innerHTML = render(obj.curr);
    }
  });
  
});
</script>
</body>
</html>
